<div class="flex flex-col history-body">
  <div class="flex items-center justify-between px-[10px] pt-2 h-[40px] flex-shrink-0">
    <span class="font-bold" i18n>History</span>
    <button
      class="flex items-center justify-center cursor-pointer shrink-0"
      eo-ng-button
      nzType="text"
      [disabled]="!getTestHistory.length"
      i18n-nzTooltipTitle
      eoNgFeedbackTooltip
      nz-popconfirm
      i18n-nzPopconfirmTitle
      [nzTooltipMouseEnterDelay]="0.4"
      [nzPopconfirmTrigger]="getTestHistory.length ? 'click' : null"
      nzPopconfirmTitle="Are you sure delete all history?"
      (nzOnConfirm)="clearAllHistory()"
      nzPopconfirmPlacement="leftTop"
      [nzOkDanger]="true"
      i18n-nzOkText
      nzOkText="Delete"
    >
      <eo-iconpark-icon name="delete"> </eo-iconpark-icon>
    </button>
  </div>
  <nz-empty *ngIf="!getTestHistory.length" nzNotFoundImage="simple"> </nz-empty>
  <eo-ng-tree-default
    [nzData]="getTestHistory"
    [nzSelectedKeys]="nzSelectedKeys"
    nzBlockNode
    (nzClick)="gotoTestHistory($event)"
    [nzTreeTemplate]="nzFixedTreeTemplate"
    class="overflow-auto pt-[10px]"
  ></eo-ng-tree-default>
  <ng-template #nzFixedTreeTemplate let-node let-origin="origin">
    <div class="flex items-center w-full cursor-pointer px-[6px]">
      <b class="block w-12 method-text" [ngClass]="'method-text-' + renderRequestMethodText(node)">{{ renderRequestMethodText(node) }}</b>
      <span class="flex-1 overflow-hidden text-[12px] truncate">{{ origin.response?.request?.uri || origin.request?.uri }}</span>
    </div>
  </ng-template>
</div>
